<template>
	<view class="box">
		<!-- 信息 -->
		<view class="msg">
			<view class="demo flex">
				<view class="d-img f-w">
					<image :src="info.productGroup.product.image" mode=""></image>
				</view>
				<view class="right">
					<view class="one hide-line bold f28">{{info.productGroup.product.store_name}}</view>
					<view class="two f-w">
						<view class="tag1">已售</view>
						<view class="tag2">{{info.productGroup.product.sales}}份</view>
					</view>
					<view class="three">
						<view class="red">拼团价￥<text class="bold">{{info.productGroup.price}}</text></view>
						<view class="f24 c999">原价￥{{info.productGroup.product.price}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 分割 -->
		<view class="bg"></view>
		<!-- 拼团状态 -->
		<view class="box2">
			<view class="title f34 bold">{{info.status=='0'?'拼团中':info.status=='10'?'拼团成功':'拼团失败'}}</view>
			<!-- 头像数组 -->
			<view class="imgs fw-ct">
				<view class="head f-w" v-for="(item,index) of info.groupUser" :key="index">
					<img :src="item.avatar?item.avatar:'https://jw.xzsw2021.com/static/user/icon_255@2x.png'" alt="">
					<view class="tag" v-if="item.is_initiator==1">团长</view>
				</view>
				<view class="head f-w" v-for="(item,index) of (info.buying_count_num-info.yet_buying_num)" :key="index">
					<img src="https://jw.xzsw2021.com/static/user/icon_255@2x.png" alt="">

				</view>
			</view>
			<!-- 剩余时间 -->
			<view class="remain f30 tr" v-if="info.status=='0'">
				还差{{info.buying_count_num-info.yet_buying_num}}人成团，距结束还剩<text
					class="bold red f32">{{info.h<10?'0'+info.h:info.h ||0}}:{{info.m<10?'0'+info.m:info.m||0}}:{{info.s<10?'0'+info.s:info.s||0}}</text>
			</view>
		</view>
		<!-- 分割 -->
		<view class="bg"></view>
		<!-- 拼团用户列表 -->
		<view class="list">



			<view class="demo f-w" v-for="(item,index) of info.groupUser" :key="index">
				<view class="uimg f-w">
					<image :src="item.avatar" mode=""></image>
				</view>
				<view class="right fw-bt">
					<view>{{item.nickname}}</view>
					<view>{{item.create_time}}</view>
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->

		<view class="bottom f-w" v-if="!isinvite&&info.status=='0'">
			<view class="b1" @click="goIndex">
				<view class="bimg f-w">
					<image src="https://jw.xzsw2021.com/static/user/icon_253@2x.png" mode=""></image>
				</view>
				<view class="c999 f22">拼团首页</view>
			</view>
			<view class="b2">
				<button open-type="share"></button>
				邀请好友
			</view>
		</view>

		<view class="bottom f-w" v-if="!isinvite">
			<block v-if="info.status=='0'">
				<view class="b1" @click="goIndex">
					<view class="bimg f-w">
						<image src="https://jw.xzsw2021.com/static/user/icon_253@2x.png" mode=""></image>
					</view>
					<view class="c999 f22">拼团首页</view>
				</view>
				<view class="b2">
					<button open-type="share"></button>
					邀请好友
				</view>
			</block>
			<block v-else>
				<view class="b2" @click="goIndex">
					拼团首页
				</view>
			</block>
		</view>


		<view class="bottom f-w" v-if="isinvite">
			<!-- <view class="b2" @click="buy" v-if="info.status=='0'">立即参团</view> -->
			<view class="b2" v-if="info.status=='0'">
				<!-- <rules :product="info.product" :group_buying_id="groupDetail.group_buying_id">
					立即参团
				</rules> -->
				
				<rules :callbackFunction="xxx" shop :product_id="info.product_group_id">
					立即参团
				</rules>
			</view>

			<view class="b2" @click="goIndex" v-else>
				返回首页
			</view>
		</view>



	</view>
</template>

<script>
	import rules from '@/components/rules.vue'
	let timer
	export default {
		components: {
			rules
		},
		data() {
			return {
				isinvite: false,
				num: 2, //剩余人数
				list2: [],
				user_list: [], //拼团人数组
				type: 2, //'',参团详情 2.我要参团
				status: 1, // 1.拼团中 2.拼团成功 3拼团失败
				text2: '立即参团',
				time: '2022-02-28 18:23',
				djs: '', //倒计时
				group_buying_id: '',
				info: '',
				unique: '',
				groupDetail: {} //拼团详情
			}
		},
		onLoad(options) {
			if (options.isinvite) {
				this.isinvite = options.isinvite
			}
			this.group_buying_id = options.group_buying_id
			// this.type=options.type||'';

		},
		onShow() {
			// 获取倒计时
			this.getinfo()


		},
		onShareAppMessage(res) {

			return {
				title: this.info.productGroup.product.store_name,
				imageUrl: this.info.productGroup.product.image,
				path: "pages/user/spellgroup/spellgroup-detail/spellgroup-detail?isinvite=true&group_buying_id=" +
					this.group_buying_id
			}
		},
		computed: {

			users() {
				let arr = [];
				this.user_list.map(item => {
					if (item.img) {
						arr.push(item)
					}
				})
				return arr
			},

		},
		methods: {
			// 
			getque() {

				this.$request('store/product/group/detail/' + this.info.product_group_id, {}, 'GET').then(res => {
					// this.unique = res.data.product.sku[''].unique
					this.groupDetail = res.data
				})

			},
			xxx() {
				this.setProduct(this.$parent.groupDetail.product, this.$parent.group_buying_id)
			},
			getinfo() {
				this.$request('store/product/group/order/detail/' + this.group_buying_id, {}, 'GET').then(res => {
					this.info = res.data
					this.getque()
					res.data.endtime = res.data.end_time * 1000 - new Date().getTime()

					this.timeCountDown()

				})
			},
			endInter: function() {


				clearInterval(timer);

			},
			// 倒计时
			timeCountDown() {


				let v = this.info
				if (timer) {
					clearInterval(timer);
				}

				timer = setInterval(() => {

					if (v.endtime > 0) {
						v.endtime = v.endtime - 1000

						if (v.endtime <= 0) {
							if (timer) {
								// 自动完成这里造成了死循环
								clearInterval(timer);

								// this.getgoodsinfo()
								// this.completeOrder(v.order_id, v);
							} // 刷新进行中
							this.getinfo()
							v.d = 0
							v.h = 0
							v.m = 0
							v.s = 0


						} else {

							this.$set(v, 'd', Math.floor(v.endtime / 1000 / 60 / 60 / 24))
							this.$set(v, 'h', Math.floor(v.endtime / 1000 / 60 / 60 % 24))
							this.$set(v, 'm', Math.floor(v.endtime / 1000 / 60 % 60))
							this.$set(v, 's', Math.floor(v.endtime / 1000 % 60))
						}
					} else {
						clearInterval(timer);

					}



				}, 1000);

			},

			// 拼团首页
			goIndex() {
				uni.reLaunch({
					url: "/pages/user/spellgroup/spellgroup"
				})
			},
			// 
			buy() {

				uni.showLoading({
					mask: true
				})
				let data = {
					cart_num: 1,
					is_new: 1,
					product_type: 4,
					product_attr_unique: this.unique,
					group_buying_id: this.group_buying_id,
					product_id: this.info.product_group_id
				}

				this.$request('user/cart/create', data, 'POST').then(res => {
					if (res.status == 200) {


						uni.navigateTo({
							url: '/pages/user/spellgroup/order-sure?id=' + this.group_buying_id +
								'&cart_id=' + res.data.cart_id
						})


					}
				})


			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		padding-bottom: 100rpx;

		.bg {
			width: 750rpx;
			height: 20rpx;
			background-color: #F5F5F5;
		}

		.msg {
			padding: 26rpx 30rpx 48rpx;
		}

		.demo {
			.d-img {
				flex-shrink: 0;
				width: 190rpx;
				height: 190rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 12rpx;
				}
			}

			.right {
				position: relative;
				flex: 1;
				margin-left: 15rpx;
				overflow: hidden;

				.two {
					margin: 10rpx 0 26rpx;
					text-align: center;
					line-height: 28rpx;
					font-size: 22rpx;

					.tag1 {
						padding: 2rpx 8rpx;
						color: #fff;
						background: linear-gradient(64deg, #FF164E, #FC420A);
						border-radius: 4rpx 0rpx 0rpx 4rpx;
					}

					.tag2 {
						padding: 2rpx 8rpx;
						background: #FFF4F5;
						color: #F83535;
						border-radius: 0rpx 4rpx 4rpx 0rpx;
					}
				}

				.three {
					font-size: 24rpx;

					.bold {
						font-size: 44rpx;
					}

					.red {
						margin-bottom: 2rpx;
					}
				}

				.four {
					position: absolute;
					right: 0;
					bottom: 0;
					width: 126rpx;
					height: 54rpx;
					line-height: 54rpx;
					text-align: center;
					color: #fff;
					font-size: 28rpx;
					background: linear-gradient(64deg, #FF164E, #FC420A);
					border-radius: 8rpx;
				}
			}
		}

		.box2 {
			padding: 30rpx 0 66rpx;
			background-color: #fff;

			.title {
				color: #FC9448;
				text-align: center;
			}

			.imgs {
				margin: 43rpx auto 0;
				width: 600rpx;
				overflow-x: auto;

				&>view:not(:first-child) {
					margin-left: 25rpx;
				}

				.head {
					position: relative;
					flex-shrink: 0;
					width: 100rpx;
					height: 100rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}

					.tag {
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
						width: 70rpx;
						height: 28rpx;
						line-height: 28rpx;
						text-align: center;
						font-size: 22rpx;
						color: #fff;
						background: linear-gradient(64deg, #FF164E, #FC420A);
						border-radius: 14rpx;
					}
				}

			}

			.remain {
				margin-top: 50rpx;
			}
		}

		.list {
			padding: 0 30rpx;

			&>view:not(:last-child) {
				border-bottom: 1rpx solid #eee;
			}

			.demo {
				padding: 40rpx 0;

				.uimg {
					flex-shrink: 0;
					width: 86rpx;
					height: 86rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.right {
					flex: 1;
					font-size: 26rpx;
				}
			}
		}

		.bottom {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 750rpx;
			height: 100rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -7rpx 29rpx 0rpx rgba(222, 222, 222, 0.4);

			.b1 {
				width: 175rpx;
				height: 100rpx;
				background: #FFFFFF;
				text-align: center;
				overflow: hidden;

				.bimg {
					margin: 10rpx auto 4rpx;
					width: 55rpx;
					height: 49rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.b2 {
				flex: 1;
				height: 100rpx;
				line-height: 100rpx;
				color: #fff;
				font-size: 32rpx;
				text-align: center;
				background: linear-gradient(64deg, #2BCCA5, #22B591);
				overflow: hidden;
				position: relative;

				button {
					z-index: 1;
					opacity: 0;
					width: 100%;
					height: 100%;
					position: absolute;
				}
			}
		}
	}
</style>
